<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./放大镜.css">
</head>
<body>
    <div class="box">
        <div class="main">
            <img src="./1.jpg" alt="">
            <div class="mask"></div>
        </div>
        <div class="small">
            <ul>
                <li><img src="./1.jpg" alt=""></li>
                <li><img src="./2.jpg" alt=""></li>
                <li><img src="./3.jpg" alt=""></li>
                <li><img src="./4.jpg" alt=""></li>
                <li><img src="./5.jpg" alt=""></li>
            </ul>
        </div>
        <div class="big">

        </div>
    </div>
</body>
</html>
<script>
    var s_img=document.querySelectorAll('.small img')
    var m_img=document.querySelector('.main img');
    var mask=document.querySelector('.mask');
    var big=document.querySelector('.big');
    for(var i=0;i<s_img.length;i++){
        s_img[i].onmouseover=function(){
            this.style.border='2px solid blue'
            m_img.src=this.src
        }
        s_img[i].onmouseout=function(){
            this.style.border='2px solid transparent'
        }
    }
    m_img.onmouseenter=function(){
        big.style.display='block'
        big.style.backgroundImage=`url(${this.src})`
    }
    m_img.onmouseleave=function(){
        big.style.display='none';
        mask.style.display='none'
    }
    m_img.onmousemove=function(e){
        mask.style.display='block'
        //最大值
        var x=(e.pageX-100)<0?0:(e.pageX-100);
        var y=(e.pageY-100)<0?0:(e.pageY-100);

        //最大值
        x=x>200?200:x;
        y=y>200?200:y;
        mask.style.top=y+'px'
        mask.style.left=x+'px';
        big.style.backgroundPosition=`${-2*x}px ${-2*y}px`
    }
</script>